import React,{useState} from 'react'
import Nav from '../../nav/Nav';
import Title from '../../title'
import ImageFallback from '../../Fimage/Lieimg'
import './posters.css'

function Posters() {
    const items = [
        {
          text: '中秋国庆',
          defaultImg:'https://tse3-mm.cn.bing.net/th/id/OIP-C.Ugx5mJZ0_2gq_iAIh8RvEQHaGc?w=219&h=190&c=7&r=0&o=5&dpr=1.5&pid=1.7',
          list: [
            { images: 'https://js.ibaotu.com/act/24/09/04/66d7c87871d3a.jpg', href: '' },
            { images: 'https://js.ibaotu.com/act/24/09/11/66e0f95461ba4.jpg', href: '' },
            { images: 'https://js.ibaotu.com/act/24/09/04/66d7c8f6297f5.jpg', href: '' },
            { images: 'https://js.ibaotu.com/act/24/09/04/66d7c8fb888c3.jpg', href: '' }
          ],
          xlist:[
            { images: 'https://js.ibaotu.com/act/24/09/04/66d7c85120ccc.jpg', href: '' },
            { images: 'https://js.ibaotu.com/act/24/09/04/66d7c857ba7c8.jpg', href: '' },
            { images: 'https://js.ibaotu.com/act/24/09/04/66d7c8663f482.jpg', href: '' },
            { images: 'https://js.ibaotu.com/act/24/09/04/66d7c86e5409a.jpg', href: '' }
          ]
        },
        {
          text: '科技创新',
          defaultImg:'https://tse3-mm.cn.bing.net/th/id/OIP-C.Ugx5mJZ0_2gq_iAIh8RvEQHaGc?w=219&h=190&c=7&r=0&o=5&dpr=1.5&pid=1.7',
          list: [
            { images: 'https://js.ibaotu.com/act/24/06/26/667bdd8387b05.jpg', href: '' },
            { images: 'https://js.ibaotu.com/act/24/06/26/667bdd7a561a7.jpg', href: '' },
            { images: 'https://js.ibaotu.com/act/24/06/26/667bdc3b6852b.jpg', href: '' },
            { images: 'https://js.ibaotu.com/act/24/06/26/667bdc4112ab7.jpg', href: '' },
          ],
          xlist:[
            { images: 'https://js.ibaotu.com/act/24/06/26/667bdc24d5446.jpg', href: '' },
            { images: 'https://js.ibaotu.com/act/24/06/26/667bdc2853bc7.jpg', href: '' },
            { images: 'https://js.ibaotu.com/act/24/04/01/660a580d2cb47.jpg', href: '' },
            { images: 'https://js.ibaotu.com/act/24/06/26/667bdc33cac38.jpg', href: '' }
          ]
        },
        {
          text: '教育运动',
         
          list: [
            { images: 'https://js.ibaotu.com/act/24/06/26/667bdbdb805ad.jpg', href: '' },
            { images: 'https://js.ibaotu.com/act/24/06/26/667bdbdf997c9.jpg', href: '' },
            { images: 'https://js.ibaotu.com/act/24/06/26/667bdbe2d82be.jpg', href: '' },
            { images: 'https://js.ibaotu.com/act/24/06/26/667bdbe5cc158.jpg', href: '' }],
            xlist:[
                { images: 'https://js.ibaotu.com/act/24/06/26/667bdb4be9369.jpg', href: '' },
                { images: 'https://js.ibaotu.com/act/24/06/26/667bdb527e7a6.jpg', href: '' },
                { images: 'https://js.ibaotu.com/act/24/06/26/667bdbd0d1f58.jpg', href: '' },
                { images: 'https://js.ibaotu.com/act/24/06/26/667bdbd772025.jpg', href: '' }
              ]
        },
        {
            text: '职位招聘',
           
            list: [
              { images: 'https://js.ibaotu.com/act/24/06/26/667bdcb2dbc04.jpg', href: '' },
              { images: 'https://js.ibaotu.com/act/24/06/26/667bdcb6245a0.jpg', href: '' },
              { images: 'https://js.ibaotu.com/act/24/06/26/667bdcc7073b6.jpg', href: '' },
              { images: 'https://js.ibaotu.com/act/24/06/26/667bdcc9ebc74.jpg', href: '' }],
              xlist:[
                  { images: 'https://js.ibaotu.com/act/24/06/26/667bdcab443c4.jpg', href: '' },
                  { images: 'https://js.ibaotu.com/act/24/06/26/667bdcae38e07.jpg', href: '' },
                  { images: 'https://js.ibaotu.com/act/24/04/01/660a5a1e59da0.jpg', href: '' },
                  { images: 'https://js.ibaotu.com/act/24/04/01/660a5a21039f3.jpg', href: '' }
                ]
          },
        {
            text: '餐饮美食',
           
            list: [
              { images: 'https://js.ibaotu.com/act/24/06/26/667bdc6791a86.jpg', href: '' },
              { images: 'https://js.ibaotu.com/act/24/06/26/667bdc6abf5b7.jpg', href: '' },
              { images: 'https://js.ibaotu.com/act/24/06/26/667bdc6d852c8.jpg', href: '' },
              { images: 'https://js.ibaotu.com/act/24/06/26/667bdc709dc5f.jpg', href: '' }],
              xlist:[
                  { images: 'https://js.ibaotu.com/act/24/04/01/660a5878404bd.jpg', href: '' },
                  { images: 'https://js.ibaotu.com/act/24/04/01/660a588d4fd33.jpg', href: '' },
                  { images: 'https://js.ibaotu.com/act/24/04/01/660a589142505.jpg', href: '' },
                  { images: 'https://js.ibaotu.com/act/24/04/01/660a5893d0da1.jpg', href: '' }
                ]
          },
        {
            text: '地产旅游',
           
            list: [
              { images: 'https://js.ibaotu.com/act/24/06/26/667bdc923af48.jpg', href: '' },
              { images: 'https://js.ibaotu.com/act/24/06/26/667bdd9a61fa1.jpg', href: '' },
              { images: 'https://js.ibaotu.com/act/24/06/26/667bdd9d96fc5.jpg', href: '' },
              { images: 'https://js.ibaotu.com/act/24/06/26/667bdc9c68feb.jpg', href: '' }],
              xlist:[
                  { images: 'https://js.ibaotu.com/act/24/06/26/667bdc8abf30f.jpg', href: '' },
                  { images: 'https://js.ibaotu.com/act/24/06/26/667bdc8df32ce.jpg', href: '' },
                  { images: 'https://js.ibaotu.com/act/24/04/01/660a58ec14595.jpg', href: '' },
                  { images: 'https://js.ibaotu.com/act/24/04/01/660a590b8f7c3.jpg', href: '' }
                ]
          },
        {
            text: '其他行业',
           
            list: [
              { images: 'https://js.ibaotu.com/act/24/06/26/667bdb21802da.jpg', href: '' },
              { images: 'https://js.ibaotu.com/act/24/09/04/66d7c7f9361db.jpg', href: '' },
              { images: 'https://js.ibaotu.com/act/24/08/21/66c5a530ce77e.jpg', href: '' },
              { images: 'https://js.ibaotu.com/act/24/06/19/66723da52e3a2.jpg', href: '' }],
              xlist:[
                  { images: 'https://js.ibaotu.com/act/24/06/26/667bdb08e886d.jpg', href: '' },
                  { images: 'https://js.ibaotu.com/act/24/05/09/663ca1ce64a97.jpg', href: '' },
                  { images: 'https://js.ibaotu.com/act/24/06/26/667bdb175086e.jpg', href: '' },
                  { images: 'https://js.ibaotu.com/act/24/06/26/667bdb1cbabe3.jpg', href: '' }
                ]
          },
      ];
      const [selectedIndex, setSelectedIndex] = useState<number>(0);
  return (
    <div className='post_box'>
      <div className='post_top'>
        <div className='post_title'>
        <Title title='行业趋势-海报' />
        </div>
        <div className='post_nav'>
        <Nav items={items}
           onSelect={setSelectedIndex} 
           selectedIndex={selectedIndex}
            />
        </div>
      </div>

      <div className='post_content'>
        <div className='post_xiao'>
        {
            items[selectedIndex].xlist.map((item, index) => {
              return (
                <div key={index}>
                  <ImageFallback src={item.images}  fallbackSrc={items[selectedIndex].defaultImg} alt='加载失败'/>
                </div>
              )
            })
          }
        </div>
        <div className='post_da'>
        {
            items[selectedIndex].list.map((item, index) => {
              return (
                <div key={index}>
                  <ImageFallback src={item.images}  fallbackSrc={items[selectedIndex].defaultImg} alt='加载失败'/>
                </div>
              )
            })
          }
        </div>
      </div>
    </div>
  )
}

export default Posters
